<template>
    <div>
        <el-container>
            <el-main>
                <el-container class="parent-body">
                    <el-header class="content-header">
                        <div><i class="el-icon-search"></i> 筛选查询</div>
                        <div>
                            <el-button @click.native="selectResults">查询结果</el-button>
                        </div>
                    </el-header>
                    <el-main class="info-main">
                        <el-form ref="form" :model="form" label-width="100px">
                            <el-form-item class="select-div" label="广告名称：">
                                <el-input placeholder="广告名称" class="input-width" v-model="form.name" clearable></el-input>
                            </el-form-item>、
                            <el-form-item class="select-div margin-left" label="广告位置：">
                                <el-select class="input-width" v-model="form.position" placeholder="全部" clearable>
                                   <el-option  v-for="item in configdata" :key="item.id" :label="item.isAdrress" :value="item.isAdrress"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item class="select-div margin-left" label="到期时间：">
                                <el-select class="input-width" v-model="form.endTimeType" placeholder="全部" clearable>
                                     <el-option label="无选择" :value="0"></el-option>
                                    <el-option label="1天内" :value="1"></el-option>
                                    <el-option label="3天内" :value="2"></el-option>
                                    <el-option label="1周内" :value="3"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </el-main>
                </el-container>
            </el-main>

            <el-footer>
                <el-container class="parent-body">
                    <el-header class="content-header">
                        <div><i class="el-icon-s-fold"></i> 数据列表</div>
                        <div>
                            <el-button @click="addexport">添加广告</el-button>
                            <el-select v-model="sort" class="input-width2" placeholder="排列方式">

                                  <el-option  label="广告名称" :value="0"></el-option>
                                   <el-option label="广告位置" :value="1"></el-option>
                            </el-select>
                        </div>
                    </el-header>
                    <el-main class="info-main padding-style">
                        <el-table ref="multipleTable" @selection-change="handleSelectionChange" :data="tableData"  border style="width: 100%">
                            <el-table-column type="selection" width="55"></el-table-column>
                            <el-table-column prop="id" label="编号" width="120"></el-table-column>
                            <el-table-column prop="name" label="广告名称"></el-table-column>
                            <el-table-column prop="position" label="广告位置"> </el-table-column>
                            <el-table-column prop="image" label="广告图片"> 
                                <template slot-scope="scope">
                                           <img :src="scope.row.image" alt=""  style="height:50px;width:100px;margin-left:50px;" class="avatar">
                                         </template>
                            </el-table-column>
                            <el-table-column label="时间" width="230">
                                <template slot-scope="scope">
                                    <div>开始时间:{{scope.row.startTime}}</div>
                                   <div>结束时间:{{scope.row.endTime}}</div>
                                
                                </template>
                            </el-table-column>
                            <el-table-column label="上线/下架" width="120">
                                <template slot-scope="scope"><el-switch v-model="scope.row.status" active-value="1" inactive-value="0" disabled></el-switch></template>
                            </el-table-column>
                            <el-table-column prop="onclikNumber" label="点击次数" width="70"> </el-table-column>
                            <el-table-column prop="orderNumber" label="生成订单" width="70"> </el-table-column>
                            <el-table-column label="操作" width="220">
                                <template slot-scope="scope">
                                    <el-button  size="mini" @click="exportOrder(scope.$index, scope.row)">编辑</el-button>
                                    <el-button  size="mini" @click="upTop(scope.$index, scope.row)" >置顶</el-button>
                                    <el-button  size="mini" @click="deleteOrder(scope.$index, scope.row)" >删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-main>
                    <el-footer class="info-foot">
                        <el-checkbox @change="toggleSelectionCheckbox" v-model="checkbox">全选</el-checkbox>
                        <el-select class="margin-left input-width2" v-model="moreOperation" placeholder="批量操作">
                            <el-option label="删除" :value="1" ></el-option>
                        </el-select>
                        <el-button class="margin-left" @click.native="confirm">确定</el-button>
                        <div class="paging-style">
                           <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage1"
                    :page-sizes="pageSizes"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                  ></el-pagination>
                        </div>
                    </el-footer>
                </el-container>
            </el-footer>
        </el-container>

    </div>
</template>

<script>

import adApi from '@/api/operate/ad';
import config from '@/api/operate/config'

    export default {
        data() {
            return {
                // 配置表数据
configdata:[],

                form:{
                    name:"",
                    position:"",
                    endTimeType:'',
                },
                accordingPageSize:"",
                sort:0,

                   // 分页数据
       pageSize: 2,
      pageSizes: [2, 3, 4, 5, 10, 25, 50, 100],
       total: 5,
      currentPage1: 1,
    //   
                multipleSelection: [],
                moreOperation:"",
                checkbox:false,
                tableData: [],
            }
        },
        watch:{

            "sort":function(){
             this.intData();

            }
        },
        methods:{
            selectResults(){
                this.intData();
            },
            exportOrder(index,row){
                this.$router.push({ path: "/operation/advertisRedact",query:{id:row.id}});
            },

// 置顶
            upTop(indexs,row){

        var data=this.tableData[0];
        var datas=this.tableData;
                datas.forEach((item, index)=>{

if(index==0){
this.tableData.splice(0,1,row);
}else if(index==indexs){
this.tableData.splice(index,index+1,data);

}else
{

  this.tableData.splice(index,index+1,datas[index]);  
}


                })




console.log(this.tableData);



            },

            deleteOrder(index,row){

                this.delete(row.id);
              this.$router.go(0);
                
            },
            addexport(){

                this.$router.replace({path: "/operation/addAdvertising"})
            },
            handleSizeChange(val) {
                this.pageSize=val;
                this.intData();
            },
            handleCurrentChange(val) {
               this.currentPage1=val;
               this.intData();
            },
            confirm(){
               if(this.moreOperation==1){
                   console.log(this.multipleSelection);
                   this.multipleSelection.forEach(v=>{

                     this.delete(v);
                   });

                  this.$router.go(0);
               }
               if(this.moreOperation==0){
                   this.$message("请选择操作数据");
               }
            },
            toggleSelectionCheckbox(){
                if(this.checkbox){
                    this.tableData.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                }else{
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
               
                if(val.length == this.tableData.length){
                    this.checkbox = true;
                }else if(val.length != this.tableData.length){
                    this.checkbox = false;
                };
 this.multipleSelection = [];

 val.forEach(v=>{

     this.multipleSelection[this.multipleSelection.length]=v.id;
 })

            },


            // 获取数据列表

            intData(){
    if(this.form.endTimeType==''){
        this.form.endTimeType=0;
    }
                let dto={

                 pageNum:this.currentPage1,
                 pageSize:this.pageSize,
                 name:this.form.name,
                 position:this.form.position,
                 endTimeType: this.form.endTimeType,
                 sort:this.sort
                }

                adApi.getList(dto.pageNum, dto.pageSize,dto.name,dto.position,dto.endTimeType,dto.sort).then(response=>{

                     console.log(response);
                     this.tableData=response.data.data.list;
                     this.total=response.data.data.total;

                })
            },

// 删除数据单条
delete(id){

    adApi.deleteOne(id).then(response=>{
     
    })
},
 // 获取配置表信息
    getConfigData(){

        config.getList().then(response=>{

            console.log(response);
            this.configdata=response.data.data;
        })
    }
        },

        created(){

            this.intData();
             this.getConfigData();
        }
    }
</script>

<style scoped>
    .badges {
        height: 60px;
        padding: 10px;
    }
    .common-home,.content-header{
        border-bottom:1px solid #E4E4E4;
        position: relative;
    }
    .common-home>div{
        display: inline-block;
        width:100px;
        height:50px;
        vertical-align: top;
        text-align: center;
        line-height: 50px;
        color:#666666;
    }
    .common-home>.refresh{
        position: absolute;
        right:10px;
    }
    .common-home>div>span{
        border:4px solid #0399FE;
        display: inline-block;
        width: 0px;
        height: 15px;
        vertical-align: middle;
        margin-right: 5px;
        background-color: #0399FE;
    }
    .parent-body{
        border:1px solid #E4E4E4;
    }
    .content-header{
        height:50px;
        line-height: 50px;
        background-color:#F3F3F3;
        color:#666666;
        position: relative;
        text-align: left;
    }
    .info-main{
        background-color:#fff;
    }

    .content-header>div{
        display: inline-block;
    }
    .content-header>div:last-of-type{
        position: absolute;
        right:10px;
    }
    .input-width{
        width:200px;
    }
    .select-div{
        display: inline-block;
        width:300px;
    }
    .input-width2{
        width:120px;
    }
    .input-width3{
        width:400px;
    }
    .padding-style{
        padding:0 !important;
    }

    .info-foot{
        background-color:#FDFDFE;
        height:60px;
        line-height: 60px;
        position: relative;
    }
    .paging-style{
        position: absolute;
        right:10px;
        display: inline-block;
        top:15px;
    }
    .margin-left{
        margin-left:10px;
    }
    .search-style{
        width:50%;
        display: inline-block;
        vertical-align: top;
    }
</style>

